class Measure {
    map
    constructor(map) {
        this.map = map
    }
    measureLine() {
        const geoJson = {
            'type': 'FeatureCollection',
            'features': []
        };

        const linestring = {
            'type': 'Feature',
            'geometry': {
                'type': 'LineString',
                'coordinates': []
            }
        };

        this.map.on('load',() => {
            this.map.addSource('geoJson', {
                'type': 'geojson',
                'data': geoJson
            });

            this.map.addLayer({
                id: 'measure-points',
                type: 'circle',
                source: 'geoJson',
                paint: {
                    'circle-radius': 5,
                    'circle-color': '#000'
                },
                filter: ['in', '$type', 'Point']
            });
            this.map.addLayer({
                id: 'measure-lines',
                type: 'line',
                source: 'geoJson',
                layout: {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                paint: {
                    'line-color': '#000',
                    'line-width': 2.5
                },
                filter: ['in', '$type', 'LineString']
            });
            this.map.on('click', (e) => {
                const features = map.queryRenderedFeatures(e.point, {
                    layers: ['measure-points']
                });

                if (geoJson.features.length > 1) geoJson.features.pop();

                if (features.length) {
                    const id = features[0].properties.id;
                    geoJson.features = geoJson.features.filter(
                        (point) => point.properties.id !== id
                    );
                } else {
                    const point = {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [e.lngLat.lng, e.lngLat.lat]
                        },
                        'properties': {
                            'id': String(new Date().getTime())
                        }
                    };

                    geoJson.features.push(point);
                }

                if (geoJson.features.length > 1) {
                    linestring.geometry.coordinates = geoJson.features.map(
                        (point) => point.geometry.coordinates
                    );

                    geoJson.features.push(linestring);

                    const value = document.createElement('pre');
                    const distance = turf.length(linestring);
                    value.textContent = `Total distance: ${distance.toLocaleString()}km`;
                }

                map.getSource('geojson').setData(geoJson);
            });
        });
        })

    }
    measureFill() {

    }
}
export default Measure
